<template>
	<view class="kindlist">
		<view class="nav">
			<view class="nav-item" :class="{org:index == current}" v-for="(item,index) in list" :key="index" @tap="tabEvents(index)">
				{{item.name}}
				<view class="icon" v-if="index == 1 || index == 2">
					<uni-icons :color="item.selectedIconStatus == 'up' ? '#DD5046' : '#fff'" type="arrowup" size="5"></uni-icons>
					<uni-icons :color="item.selectedIconStatus == 'down' ? '#DD5046' : '#fff'" type="arrowdown" size="5"></uni-icons>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-items" v-for="item in goodsList" :key="item.id">
				<navigator :url="`./info/info?id=${item.id}`">
					<image class="img5" :src="item.pic"></image>
					<view class="title">
						{{item.name}}
					</view>
					<view class="bottom">
						<view class="price">
							￥{{item.price}}元
						</view>
						<view>不凡</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	//  符合easycom规范的插件在使用的时候 不需要进行引入即可在页面当中使用
	import {
		findProductList,findCategory
	} from "@/api/kind/kindList/index.js"
	export default {
		data() {
			return {
				id: "",
				goodsList: [],
				isDesc: "",
				sortBy: "",
				start: 1,
				limit: 5,
				total: 0,
				current: 0,
				list: [{
						name: "新品"
					},
					{
						name: "销量",
						selectedIconStatus: "default"
					},
					{
						name: "价格",
						selectedIconStatus: "default"
					},
					{
						name: "筛选"
					}
				]
			};
		},

		methods: {
			tabEvents(val) {

				this.goodsList = [];
				this.start = 1;
				this.limit = 5;
				var item = this.list.find((ele, index) => index == val);

				if (this.current == val) { // 多次点击同一个tab栏

				} else {
					// 重置tab状态
					this.list.forEach(ele => ele.selectedIconStatus = "default");

					if (this.list[val].name == "销量") {
						this.sortBy = "sale"
					} else if (this.list[val].name == "价格") {
						this.sortBy = "price"
					}
				}
				if (item.selectedIconStatus == "default") {
					item.selectedIconStatus = "up"
					this.isDesc = 1
				} else if (item.selectedIconStatus == "up") {
					item.selectedIconStatus = "down"
					this.isDesc = 0
				} else {
					item.selectedIconStatus = "up"
					this.isDesc = 1
				}
				this.current = val;
				this.init();

			},
			init() {
				findProductList(this.start, this.limit, {
						"categoryId": this.id,
						"isDesc": this.isDesc,
						"sortBy": this.sortBy
					})
					.then(res => {
						uni.stopPullDownRefresh();
						// console.log(res);
						this.goodsList.push(...res.data.rows);
						this.total = res.data.total;
					})
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			// 获取最新的数据
			this.start = 1;
			this.limit = 5;
			this.goodsList = [];
			this.init();
		},
		// 上拉加载
		onReachBottom() {
			if (this.total > this.start * this.limit) {
				this.start++;
				this.init();
			} else { // 阻止请求下一页数据
				uni.showToast({
					title: "没有更多数据了",
					icon: "none"
				})
			}

		},
		onLoad(options) {
			this.id = options.id;
			this.init();
		}
	}
</script>

<style lang="scss" scoped>
	.kindlist {
		padding-top: var(--window-top);
		/* #ifdef MP-WEIXIN */
		padding-top: 66px;
		/* #endif */
		background-color: #F1ECE7;
	}

	.nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		position: fixed;
		left: 0;
		top: var(--window-top);
		background-color: #354E44;
		color: #fff;
		padding-top: 7px;
		padding-bottom: 7px;
		z-index: 9999;

		.org {
			color: #DD5046;
		}

		.nav-item {
			display: flex;
			align-items: center;
			font-size: 15px;

			.icon {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-left: 3px;
			}
		}
	}

	.list {
		width: 100%;
		margin-top: 60rpx;
		overflow: hidden;

		.list-items {
			width: 158px;
			height: 209px;
			float: left;
			margin-left: 22px;
			margin-bottom: 22px;
			background-color: #fff;
			border-radius: 5px;

			.img5 {
				width: 100%;
				height: 119px;
			}

			.title {
				font-size: 13px;
				font-weight: 700;
				color: #3e3e3e;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-top: 4px;
				padding: 18px 18px 0 18px;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
				padding: 5px 18px 0 18px;
				font-size: 13px;
			}
		}
	}
</style>
